<template>
  <section>
    <el-form label-width="120px" size="mini"  :model="address" :rules="rules" ref="ruleForm">
      <el-form-item label="省">
        <el-input size="mini" v-model="address.provinceName"></el-input>
      </el-form-item>
      <el-form-item label="市">
        <el-input size="mini" v-model="address.cityName"></el-input>
      </el-form-item>
      <el-form-item label="区（县）">
        <el-input size="mini" v-model="address.countyName"></el-input>
      </el-form-item>
      <el-form-item label="详细">
        <el-input size="mini" v-model="address.detailInfo"></el-input>
      </el-form-item>
      <el-form-item label="邮编">
        <el-input size="mini" v-model="address.postalCode"></el-input>
      </el-form-item>
      <el-form-item label="收件人">
        <el-input size="mini" v-model="address.userName"></el-input>
      </el-form-item>
      <el-form-item label="手机（电话）">
        <el-input size="mini" v-model="address.telNumber"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="submitForm('ruleForm')" size="mini">确定</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "getAddress",
    props:['address'],
    data(){
      return{
        addressDefine:{
          cityName:"广州市",
          countyName:"海珠区",
          detailInfo:"新港中路397号",
          nationalCode:"510000",
          postalCode:"510000",
          provinceName:"广东省",
          telNumber:"020-81167888",
          userName:"张三"
        },
        rules: {
          userName: [
            { required: true, message: '请输入收件人姓名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          provinceName: [
            { required: true, message: '请输入省份（或地区）', trigger: 'blur' },
          ],
          cityName: [
            { required: true, message: '请输入市', trigger: 'blur' }
          ],
          countyName: [
            { required: true, message: '请输入地区/乡镇', trigger: 'blur' }
          ],
          detailInfo: [
            { required: true, message: '请输入详细地址', trigger: 'blur' }
          ],
          telNumber: [
            { required: true, message: '请输入联系方式', trigger: 'blur' },
            { min: 11, max: 11, message: '固定电话请带区号', trigger: 'blur' }
          ],
        },

        // rules: {
        //   userName: [
        //     { required: true, message: '请输入收件人姓名', trigger: 'blur' },
        //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        //   ],
        //   provinceName: [
        //     { required: true, message: '请选择省份', trigger: 'change' }
        //   ],
        //   cityName: [
        //     { type: 'date', required: true, message: '请选择市', trigger: 'change' }
        //   ],
        //   countyName: [
        //     { type: 'date', required: true, message: '请选择地区', trigger: 'change' }
        //   ],
        //   detailInfo: [
        //     { type: 'array', required: true, message: '请输入详细地址', trigger: 'change' }
        //   ],
        //   telNumber: [
        //     { required: true, message: '请输入联系方式', trigger: 'change' }
        //   ],
        // }
      }
    },

    watch:{
      address(nv,ov){
        if(nv)
          this.init(nv)
      }
    },
    created(){
      this.init(this.address)
    },
    methods:{
      init(address){
        if(address.userName === undefined){
          for(let key in this.addressDefine){
            address[key]=this.addressDefine[key]
          }
        }else {
          this.addressDefine=this.address
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!')
            console.log('提交了------',this.addressDefine)
            this.$emit('submit',this.addressDefine)
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()

      }
    }
  }
</script>

<style scoped>

</style>
